<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>抽奖大礼包</title>
    <style>
        div{

        }
        #zheng{
            position: relative;

        }
        #pan{
            position: absolute;
            left:8px;
            transition: 3s;
        }
    </style>
</head>
<body>
<div>
    <img src="幸运转盘.png" id="pan" />
    <img src="幸运转盘指针.png"  id="zheng" onclick="jingxi()"/>

</div>
<script>
    var chooses=[3620,3620+90,3620+90,3620+45,3620+45,3620+90,3620+90,3620+90,3620+90,3620+90,3620+90,3620+90,3620+90,3620+90]
    function jingxi() {
        var a=Math.floor(Math.random()*14);
        pan.style.transform= "rotate("+chooses[a]+"deg)"
    }
</script>
</body>
</html>

<!--<style>-->
    <!--.zhuanpan{-->
        <!--position:relative;-->
        <!--width:472px;-->
    <!--}-->
    <!--.zhen{-->
        <!--position:absolute;-->
        <!--left:156px;-->
        <!--top:143px;-->
    <!--}-->
    <!--#pan{-->
        <!--transition:all 3s;-->
    <!--}-->
<!--</style>-->

<!--<div class="zhuanpan">-->
    <!--<img class="pan" id="pan" src="564fff53N974e6518.png" />-->
    <!--<img class="zhen" onclick="choujiang()" src="wheel_center.png" />-->
<!--</div>-->

<!--<script>-->
    <!--var yinyue = new Audio();-->
    <!--yinyue.src = "1.mp3";-->

    <!--var luckyNums = [3620,3620+90,3620+180,3620+270,-->
        <!--3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45,3620+45];-->

    <!--function choujiang(){-->
        <!--var i = Math.floor(Math.random()*22);-->
        <!--pan.style.transform = "rotate("+luckyNums[i]+"deg)";-->

        <!--if(i>=4){-->
            <!--yinyue.play();-->
        <!--}-->
    <!--}-->
<!--</script>-->
